import React, { useEffect, useState } from "react";
import { Space, Table, Image, Card, Modal, Button, Drawer } from "antd";
import type { ColumnsType } from "antd/es/table";
import useModal from "@/hooks/useModal";
import useMessage from "@/hooks/useMessage";
import AlbumAdd from "../AlbumAdd";
import styles from "./index.module.less";
import { Album } from "@/api/interface/album";
import { getAlbumListApi, deleteAlbumApi } from "@/api/modules/album";
import usePagination from "@/hooks/usePagination";
import AlbumFilter from "../AlbumFilter";

export interface DataType {
	id: number;
	key: number;
	album_name: string;
	album_cover: string;
	createdAt: string;
}
[];

const AlbumList: React.FC = props => {
	const columns: ColumnsType<DataType> = [
		{
			title: "id",
			dataIndex: "id",
			key: "id"
		},
		{
			title: "名称",
			dataIndex: "album_name",
			key: "album_name"
		},
		{
			title: "封面",
			dataIndex: "album_cover",
			key: "album_cover",
			render: (_, row) => {
				return <Image width={200} height={100} src={row.album_cover} />;
			}
		},
		{
			title: "创建日期",
			dataIndex: "createdAt",
			key: "createdAt"
		},
		{
			title: "操作",
			key: "action",
			render: (_, row) => {
				return (
					<>
						<Space size="middle">
							<a onClick={() => openEdit(row)}>修改</a>
							<a onClick={() => openModal(row.id)}>删除</a>
						</Space>
					</>
				);
			}
		}
	];

	const listExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => setAddVisible(true)}>
				新增
			</Button>
			<Button type="primary" onClick={() => getAlbumList()}>
				刷新
			</Button>
		</div>
	);

	const { contextHolder, success, error } = useMessage();
	const { id, isModalOpen, openModal, closeModal } = useModal();

	const [albumList, setAlbumList] = useState<Album[]>([]);
	const [albumTotal, setAlbumTotal] = useState(0);
	const [album, setAlbum] = useState<DataType>();

	const getAlbumList = async (page: number = 1, size: number = 10, wrapper?: Partial<Album>) => {
		const res = await getAlbumListApi(page, size, wrapper);
		if (res.code === 200) {
			setAlbumList(res.data.rows);
			setAlbumTotal(res.data.total);
		}
	};

	const { onChangePage } = usePagination(getAlbumList);

	const deleteAlbum = async () => {
		const res = await deleteAlbumApi(id);
		if (res.code === 200) {
			success("删除成功");
		} else {
			error("删除失败");
		}
		closeModal();
	};

	const data: any = albumList.map(item => {
		return {
			id: item.id,
			key: item.id,
			album_name: item.album_name,
			album_cover: item.album_cover,
			createdAt: item.createdAt
		};
	});

	useEffect(() => {
		getAlbumList();
	}, []);

	// 修改
	const [editVisible, setEditVisible] = useState(false);
	const openEdit = async (album: DataType) => {
		setAlbum(album);
		setEditVisible(true);
	};
	const onCloseEdit = () => {
		getAlbumList();
		setEditVisible(false);
	};

	// 新增
	const [addVisible, setAddVisible] = useState(false);
	const onCloseAdd = () => {
		getAlbumList();
		setAddVisible(false);
	};

	// 搜索
	const onSearch = (album?: Album) => {
		getAlbumList(1, 10, album);
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<AlbumFilter onSearch={onSearch} />
			<Card title="数据列表" extra={listExtra}>
				<Table columns={columns} dataSource={data} pagination={{ total: albumTotal, onChange: onChangePage }} />
			</Card>

			<Modal title="提醒" mask={false} visible={isModalOpen} onOk={deleteAlbum} onCancel={closeModal}>
				确定删除该相册吗
			</Modal>

			<Drawer
				title="新增"
				placement="right"
				width={500}
				onClose={() => {
					setAddVisible(false);
				}}
				visible={addVisible}
			>
				<AlbumAdd onComfirm={onCloseAdd}></AlbumAdd>
			</Drawer>

			<Drawer
				title="修改"
				placement="right"
				width={500}
				onClose={() => {
					setEditVisible(false);
				}}
				visible={editVisible}
			>
				<AlbumAdd type="edit" album={album} onComfirm={onCloseEdit}></AlbumAdd>
			</Drawer>
		</div>
	);
};

export default AlbumList;
